<template>
    <div class="box">
        <img src="../img/404.jpeg" alt="">
        <div class="btn">
            <el-button type="primary" @click="handleEdit">返回上一页</el-button>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router' // 导入路由钩子

const router = useRouter() // 创建路由实例

const handleEdit = () => {
    router.go(-1) // 返回上一页
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    /* img拉满全屏，居中 */
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; 
    }
}
.btn {
    position: absolute;
    top: 70%;
    left: 50%; 
    transform: translate(-50%, -50%);
    button {
        width: 100px;
        height: 50px;
        font-size: 16px; 
    }
}
</style>